<script setup lang="ts">
/**
 * @name EnterpriseInformation
 * @description 企业基础信息
 */
import {
  Check,
  Close,
  Edit,
  Operation,
} from '@element-plus/icons-vue'
import type { Action } from 'element-plus'
import type { EnterpriseInfo } from '@/types'
import {
  queryList,
  saveOrUpdate,
} from '@/api/modules/enterprise'
// ------------------use------------------
// #region
const { globalProperties } = useCurrentInstance()
const [isToolBox, setIsToolBox] = useState<boolean>(false)
const [enterpriseInfo, setEnterpriseInfo]
  = useState<EnterpriseInfo>({} as any)
const { vLoading, withLoading } = useDefineLoading()
const [isEdit, setIsEdit] = useState<boolean>(false)
const { userInfo } = storeToRefs(useUserStore())
// #endregion
// ------------------静态变量------------------
// #region

// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region

// #endregion
// ------------------reactive------
// #region

// #endregion
// ------------------computed------
// #region

// #endregion
// ------------------生命周期------------------
// #region
onMounted(() => {
  getEnterpriseInfo()
})
// #endregion
// ------------------内置方法---------------------
// #region

// #endregion
// ------------------方法---------------------
// #region
async function getEnterpriseInfo() {
  const { data: res } = await withLoading(queryList)(
    userInfo.value.tenantId,
  )

  setEnterpriseInfo(res[0] || {})
}
async function addOrUpdateData() {
  const { code } = await saveOrUpdate(enterpriseInfo.value)
  if (code !== 200)
    return
  globalProperties.$message.success('信息更新成功！')
  getEnterpriseInfo()
  close()
}
function editData() {
  setIsEdit(true)
}
function close() {
  setIsToolBox(false)
  setIsEdit(false)
}
async function verify(action = '关闭') {
  const res: Action = await globalProperties
    .$confirm(
      `没有提交的数据不会保存到云端，确定${action}？`,
      '警告',
      {
        type: 'warning',
      },
    )
    .catch(e => e)
  return res === 'confirm'
}
async function handleClose(action = '切换') {
  if (!isEdit.value) {
    close()
    return true
  }

  const res = await verify(action)
  res && close()
  return res
}

function handleInputNumberOfManagers() {
  let v = enterpriseInfo.value.numberOfManagers
  v = v.replace(/\D/g, '')
  const vv = Number(v)
  enterpriseInfo.value.numberOfManagers = vv.toString()
}
// #endregion
</script>

<template>
  <div
    class="padding-sm enterprise-information overflow-x relative container"
  >
    <el-tabs
      v-loading
      model-value="base"
      class="width-fill height-fill overflow box-border"
      :before-leave="() => handleClose()"
    >
      <el-tab-pane
        label="基础信息"
        name="base"
        class="height-fill"
      >
        <b-scrollbar>
          <el-descriptions
            :column="2"
            border
            class="width-fill"
          >
            <el-descriptions-item label="企业名称">
              <el-input
                v-model="enterpriseInfo.enterpriseName"
                :disabled="!isEdit"
                placeholder=""
              />
            </el-descriptions-item>
            <el-descriptions-item label="企业联系方式">
              <el-input
                v-model="enterpriseInfo.unitContactNumber"
                :disabled="!isEdit"
                placeholder=""
              />
            </el-descriptions-item>

            <el-descriptions-item label="所属地区区域">
              <el-input
                v-model="enterpriseInfo.districtBelong"
                :disabled="!isEdit"
                placeholder=""
              />
            </el-descriptions-item>
            <el-descriptions-item label="经纬度">
              <span v-if="!isEdit">
                {{ enterpriseInfo.latitude }},{{
                  enterpriseInfo.longitude
                }}
              </span>
              <div
                v-else
                class="width-fill align-center flex justify-between"
              >
                <el-input-number
                  v-model="enterpriseInfo.latitude as unknown as number"
                  class="mx-4"
                  controls-position="right"
                />
                <el-input-number
                  v-model="enterpriseInfo.longitude as unknown as number"
                  class="mx-4"
                  controls-position="right"
                />
              </div>
            </el-descriptions-item>

            <el-descriptions-item label="注册日期">
              <el-input
                v-model="enterpriseInfo.registrationDate"
                :disabled="!isEdit"
                placeholder=""
              />
            </el-descriptions-item>
            <el-descriptions-item label="注册资本">
              <el-input
                v-model="enterpriseInfo.registeredCapital"
                :disabled="!isEdit"
                placeholder=""
              />
            </el-descriptions-item>
            <el-descriptions-item label="传真">
              <el-input
                v-model="enterpriseInfo.fax"
                :disabled="!isEdit"
                placeholder=""
              />
            </el-descriptions-item>
            <el-descriptions-item label="电子邮箱">
              <el-input
                v-model="enterpriseInfo.email"
                :disabled="!isEdit"
                placeholder=""
              />
            </el-descriptions-item>
            <el-descriptions-item label="企业网址">
              <el-input
                v-model="enterpriseInfo.enterpriseUrl"
                :disabled="!isEdit"
                placeholder=""
              />
            </el-descriptions-item>
            <el-descriptions-item label="邮政编码">
              <el-input
                v-model="enterpriseInfo.zipCode"
                :disabled="!isEdit"
                placeholder=""
              />
            </el-descriptions-item>
            <el-descriptions-item label="单位地址">
              <el-input
                v-model="enterpriseInfo.address"
                :disabled="!isEdit"
                placeholder=""
              />
            </el-descriptions-item>
            <el-descriptions-item label="法人代表">
              <el-input
                v-model="enterpriseInfo.legalRepresentative"
                :disabled="!isEdit"
                placeholder=""
              />
            </el-descriptions-item>
          </el-descriptions>
        </b-scrollbar>
      </el-tab-pane>
      <el-tab-pane
        label="其他信息"
        name="other"
        class="height-fill"
      >
        <b-scrollbar>
          <el-descriptions
            :column="2"
            border
            class="width-fill"
          >
            <el-descriptions-item label="是否央企">
              <el-select
                v-model="enterpriseInfo.centralEnterprises"
                :disabled="!isEdit"
                class="width-fill"
                placeholder=""
              >
                <el-option label="是" value="1" />
                <el-option label="否" value="0" />
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item
              label="是否能源加工转企业"
            >
              <el-select
                v-model="enterpriseInfo.transferEnterprise"
                :disabled="!isEdit"
                class="width-fill"
                placeholder=""
              >
                <el-option label="是" value="1" />
                <el-option label="否" value="0" />
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item
              label="是否能源管理体系认证"
            >
              <el-select
                v-model="
                  enterpriseInfo.managementCertification
                "
                :disabled="!isEdit"
                class="width-fill"
                placeholder=""
              >
                <el-option label="是" value="1" />
                <el-option label="否" value="0" />
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="法人代码">
              <el-input
                v-model="enterpriseInfo.corporateCode"
                :disabled="!isEdit"
                placeholder=""
              />
            </el-descriptions-item>
            <el-descriptions-item label="发证日期">
              <el-date-picker
                v-model="enterpriseInfo.registrationDate"
                class="!w-full"
                type="datetime"
                value-format="YYYY-MM-DD HH:mm:ss"
                format="YYYY-MM-DD HH:mm:ss"
                :disabled="!isEdit"
                placeholder=""
              />
            </el-descriptions-item>
            <el-descriptions-item label="企业管理人数">
              <el-input
                v-model="enterpriseInfo.numberOfManagers"
                :disabled="!isEdit"
                placeholder=""
                @input="handleInputNumberOfManagers"
              />
            </el-descriptions-item>
            <el-descriptions-item label="企业主导产品">
              <el-input
                v-model="enterpriseInfo.leadingProduct"
                :disabled="!isEdit"
                placeholder=""
              />
            </el-descriptions-item>
            <el-descriptions-item
              label="企业主要生产线名称"
            >
              <el-input
                v-model="enterpriseInfo.mainProductionLine"
                :disabled="!isEdit"
                placeholder=""
              />
            </el-descriptions-item>
            <el-descriptions-item label="认证机构">
              <el-input
                v-model="enterpriseInfo.certificationBody"
                :disabled="!isEdit"
                placeholder=""
              />
            </el-descriptions-item>
            <el-descriptions-item label="认证日期">
              <el-date-picker
                v-model="enterpriseInfo.certificationDate"
                :disabled="!isEdit"
                type="datetime"
                value-format="YYYY-MM-DD HH:mm:ss"
                format="YYYY-MM-DD HH:mm:ss"
                class="!w-full"
                placeholder=""
              />
            </el-descriptions-item>
            <el-descriptions-item label="能源管理师证号">
              <el-input
                v-model="enterpriseInfo.managerId"
                :disabled="!isEdit"
                placeholder=""
              />
            </el-descriptions-item>
            <el-descriptions-item label="能管负责人电话">
              <el-input
                v-model="enterpriseInfo.principalPhone"
                :disabled="!isEdit"
                placeholder=""
              />
            </el-descriptions-item>
            <el-descriptions-item label="能管负责人姓名">
              <el-input
                v-model="enterpriseInfo.principal"
                :disabled="!isEdit"
                placeholder=""
              />
            </el-descriptions-item>
            <el-descriptions-item label="主管节能领导电话">
              <el-input
                v-model="enterpriseInfo.supervisorPhone"
                :disabled="!isEdit"
                placeholder=""
              />
            </el-descriptions-item>
            <el-descriptions-item label="主管节能领导">
              <el-input
                v-model="enterpriseInfo.supervisor"
                :disabled="!isEdit"
                placeholder=""
              />
            </el-descriptions-item>
            <el-descriptions-item label="能源管理机构">
              <el-input
                v-model="enterpriseInfo.managementAgency"
                :disabled="!isEdit"
                placeholder=""
              />
            </el-descriptions-item>
            <el-descriptions-item label="集团类型">
              <el-input
                v-model="enterpriseInfo.groupType"
                :disabled="!isEdit"
                placeholder=""
              />
            </el-descriptions-item>
            <el-descriptions-item label="集团地址">
              <el-input
                v-model="enterpriseInfo.groupAddress"
                :disabled="!isEdit"
                placeholder=""
              />
            </el-descriptions-item>
            <el-descriptions-item label="所属集团">
              <el-input
                v-model="enterpriseInfo.affiliatedGroup"
                :disabled="!isEdit"
                placeholder=""
              />
            </el-descriptions-item>
          </el-descriptions>
        </b-scrollbar>
      </el-tab-pane>
    </el-tabs>
    <div class="margin-right-sm toolbox margin-top">
      <transition
        enter-active-class="animate__animated animate__faster animate__fadeInRightBig toolbox-ani"
      >
        <div
          v-show="isToolBox"
          class="align-center toolbox-content flex gap-xs"
        >
          <el-tooltip content="编辑" placement="top">
            <el-icon class="text-blue" @click="editData">
              <Edit />
            </el-icon>
          </el-tooltip>
          <el-tooltip content="保存" placement="top">
            <el-icon
              class="text-green"
              @click="addOrUpdateData"
            >
              <Check />
            </el-icon>
          </el-tooltip>
          <el-tooltip content="关闭" placement="top">
            <el-icon @click="handleClose('关闭')">
              <Close />
            </el-icon>
          </el-tooltip>
        </div>
      </transition>

      <el-tooltip content="管理" placement="top">
        <transition
          enter-active-class="animate__animated animate__faster animate__fadeInRightBig toolbox-ani"
        >
          <el-icon
            v-if="$power('edit')"
            v-show="!isToolBox"
            class="c-pointer toolbox-menu absolute"
            @click="setIsToolBox(true)"
          >
            <Operation />
          </el-icon>
        </transition>
      </el-tooltip>
    </div>
  </div>
</template>

<style lang="scss">
//------------------组件样式------------------
.enterprise-information {
  .toolbox {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 99;
    color: var(--el-text-color-placeholder);
    &-menu {
      position: absolute;
      top: 0px;
      right: 0px;
      &:hover {
        background-color: var(--el-bg-color-page);
        color: var(--el-text-color-regular);
      }
    }
    &-ani {
      --animate-duration: 0.3s;
    }
    &-content {
      top: 0px;
      right: 0px;
      z-index: 9;
      .el-icon {
        background-color: var(--el-bg-color-page);
        &:hover {
          background-color: var(
            --el-border-color-extra-light
          );
          filter: drop-shadow(0px 0px 2px currentColor);
        }
      }
    }
    .el-icon {
      margin-top: -5px;
      transition: all 0.2s;
      padding: 5px;
      border-radius: 50%;
      cursor: pointer;
    }
  }

  .el-input-number.is-disabled {
    .el-input-number__decrease,
    .el-input-number__increase {
      display: none;
    }
  }
  .el-input.is-disabled {
    cursor: initial;
    .el-input__wrapper {
      background-color: var(
        --el-input-bg-color,
        var(--el-fill-color-blank)
      );
      box-shadow: none;
    }
    .el-input__inner {
      cursor: initial;
      color: var(--el-text-color-primary);
      -webkit-text-fill-color: var(--el-text-color-primary);
    }
    .el-input__suffix,
    .el-input__prefix {
      visibility: hidden;
      opacity: 0;
    }
  }
  .el-select__wrapper.is-disabled {
    background-color: var(
      --el-input-bg-color,
      var(--el-fill-color-blank)
    );
    box-shadow: none;
  }
  .el-select.el-select--disabled {
    .el-input__suffix {
      display: none;
    }
    .el-input.is-disabled {
      cursor: initial;
      .el-input__wrapper {
        background-color: var(
          --el-input-bg-color,
          var(--el-fill-color-blank)
        );
        box-shadow: none;
      }
      .el-input__inner {
        cursor: initial;
        color: var(--el-text-color-primary);
        -webkit-text-fill-color: var(
          --el-text-color-primary
        );
      }
    }
  }
  .el-descriptions {
    --el-descriptions-table-border: none;
    --el-descriptions-item-bordered-label-background: var(
      --el-bg-color
    );
    // :deep(tr) {
    //   display: flex;
    //   align-items: center;
    // }
    :deep(.el-descriptions__label) {
      text-align: right;
      position: relative;
    }
    :deep(.el-descriptions__label::before) {
      position: absolute;
      right: 0px;
      content: ':';
    }
  }
}

//-------------样式穿透-------------
</style>
